<template>
  <el-upload class="avatar-uploader" :http-request="handleImport" :show-file-list="false">
    <el-icon class="avatar-uploader-icon">
      <Plus />
    </el-icon>
    导入Excel
  </el-upload>
  <div ref="cont">
    <el-table :data="json" style="width: 100%">
      <el-table-column label="轮播名称">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="广告链接">
        <template #default="scope">
          <a :href="scope.row.link" target="_blank" rel="noopener noreferrer">点击预览</a>
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.url" alt="" srcset="" style="height: 50px" />
        </template>
      </el-table-column>
      <el-table-column label="是否显示">
        <template #default="scope">
          <el-switch v-model="scope.row.show" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { excelImport } from "../../untils/excel-sdk";
export default {
  methods: {
    handleImport(info) {
      console.log(info);
      let json = excelImport(info.file, this.$refs.cont);
      console.log(json)
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
